<!-- 

 -->
<script setup>
import axios from "axios";
import {ref,onMounted, reactive} from "vue"
import MyMasterSCLY from "../../components/myMasterSCLY.vue";

//这个是为了推销我自己做的页面,若是你自己改动，请改动以下数据
const myImageUrl = ref("../../../public/images/my/myImage.webp")
const myName = ref("陈天羽")
const myMessage = ref("本站长就是一个FW,有关后端,前端,小程序,嵌入式单片机,3D建模,电脑,剪辑视频的相关知识可以找本FW")
const callMyWX = ref("17366632036")
//直播间宣传
const liveRomId = ref("https://live.bilibili.com/1433163")
const liveTipsName = ref("前往我bilibili的直播间")

const sjly_name = reactive({
    java: "JAVA",
    golang: "GoLang",
    python: "Python",
    nodejs: "NodeJS",
    c: "C",
    cpp: "C++",
    vue: "Vue",
    react: "React",
    solidworks: "solidworks",
    flutter: "flutter",
    xcx: "小程序",
    html: "HTML",
    vue: "Vue.js",
    react:"React.js",
    comput: "电脑装配单"
})
const sjly_back_color = reactive({
    back1: "rgb(176,29,36)",
    back2: "rgb(103,213,226)",
    back3: "rgb(27,152,110)",
    back4: "rgb(5,85,82)",
    back5: "rgb(2,198,250)",
    back6: "rgb(22,210,38)",
    back7: "rgb(239,100,40)",
    back8: "rgb(51,73,94)",
    back9: "rgb(75,190,221)",
    back10: "rgb(0,0,0)",
})

axios.get('/bilibili-api-live/get_list?room_id=1433163').then(async res=>{
    console.log(res.data)
}).catch(err=>console.log(err))

onMounted(()=>{
    document.title = "站长(陈天羽)的个人bilibili直播间"
})
</script>

<template>
    <div class="dialogBox"></div>
    <div class="isMyTitleBox">
        <div class="myMiniCard">
            <div class="myImageBox">
                <img :src="myImageUrl" alt="" />
            </div>
            <span class="myName">{{ myName }}</span>
            <div class="aboutMyWX">微信:&nbsp;{{callMyWX}}</div>
            <span class="myMessage">{{ myMessage }}</span>
            <a :href="liveRomId">
                <span class="myLiveRoom">{{ liveTipsName }}</span>
            </a>
        </div>
        <div class="InvolvedFieldBox">
            <span class="sjly_title">涉及领域</span>
            <div class="sjly_master_box">
                <MyMasterSCLY 
                :back1="sjly_back_color.back1" 
                :back2="sjly_back_color.back2"
                :scly1="sjly_name.java"
                :scly2="sjly_name.golang"
                linkPage1="java"
                linkPage2="golang/go1"
                />
                <MyMasterSCLY 
                :back1="sjly_back_color.back3" 
                :back2="sjly_back_color.back4"
                :scly1="sjly_name.c"
                :scly2="sjly_name.cpp"
                linkPage1="c"
                linkPage2="cpp"
                />

                <MyMasterSCLY 
                :back1="sjly_back_color.back5" 
                :back2="sjly_back_color.back6"
                :scly1="sjly_name.flutter"
                :scly2="sjly_name.xcx"
                linkPage1="flutter/flutter1"
                linkPage2="xcx/xcx1"
                />
                <MyMasterSCLY 
                :back1="sjly_back_color.back7" 
                :back2="sjly_back_color.back8"
                :scly1="sjly_name.html"
                :scly2="sjly_name.vue"
                linkPage1="html"
                linkPage2="vue"
                />
                <MyMasterSCLY 
                :back1="sjly_back_color.back9" 
                :back2="sjly_back_color.back10"
                :scly1="sjly_name.react"
                :scly2="sjly_name.comput"
                linkPage1="react"
                linkPage2="comput"
                />
            </div>
        </div>

        <div class="isMyShow">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped>
.dialogBox{
    width: 100%;
    height: 6%;
    background: rgb(217,172,116);
}
.isMyTitleBox{
    width: 100%;
    height: 100%;
}
.myMiniCard{
    position: absolute;
    right: 10px;
    top: 7%;
    width: 20%;
    height: 30%;
    /* background-color: skyblue; */
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .42);
}
.myImageBox{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 35%;
    height: 50%;
    border-radius: 50%;
}
.myImageBox img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    user-select: none;
}
.myName{
    position: absolute;
    left: 40px;
    top: 45px;
    font-size: 25px;
}
.aboutMyWX{
    position: absolute;
    left: 40px;
    top: 80px;
}
.myLiveRoom{
    position: absolute;
    left: 40px;
    top: 100px;
    cursor: pointer;
    color: #000;
}
.myLiveRoom:hover{
    color: rgba(0, 255, 200, 1);
}
.myMessage{
    position: absolute;
    left: 20px;
    top: 150px;
}

.InvolvedFieldBox{
    position: absolute;
    right: 10px;
    top: 40%;
    width: 20%;
    height: 60%;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .42);
}
.sjly_title{
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 18px;
    font-weight: 600;
}
.sjly_master_box{
    position: absolute;
    left: 0;
    top: 8%;
    width: 100%;
    height: 92%;
}

.isMyShow{
    position: absolute;
    left: 20px;
    top: 65px;
    width: 75%;
    height: 95%;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .42);
}

</style>